import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer' // 引入默认的renderer
import { customElements, customConfig } from '../../utils/util'
import {
    append as svgAppend,
    attr as svgAttr,
    create as svgCreate,
    innerSVG
} from 'tiny-svg';
import { is } from 'bpmn-js/lib/util/ModelUtil'

const HIGH_PRIORITY = 1500 // 最高优先级
export default class CustomRenderer extends BaseRenderer { // 继承BaseRenderer
    constructor(eventBus, bpmnRenderer) {
        super(eventBus, HIGH_PRIORITY)
        this.bpmnRenderer = bpmnRenderer
    }

    canRender(element) {
        // ignore labels
        return !element.labelTarget
    }

    drawShape(parentNode, element) {
        const type = element.type // 获取到类型
        if (customElements.includes(type)) { // or customConfig[type]
            const str = `<foreignObject width="116" height="200">
                <div class="node-wrapper" xmlns="http://www.w3.org/1999/xhtml">
                    <p class="node-name">${ element.businessObject.name }</p>
                    <div class="node-info">
                        <div>a:111</div>
                    </div>
                </div>
            </foreignObject>`
            const { url, attr } = customConfig[type]
            const customIcon = svgCreate('image', { // 在这里创建了一个image
                ...attr,
                href: url
            })
            element['width'] = attr.width // 这里我是取了巧, 直接修改了元素的宽高
            element['height'] = attr.height
            innerSVG(parentNode, str)
            // svgAppend(parentNode, customIcon)
            return customIcon
        }
        const shape = this.bpmnRenderer.drawShape(parentNode, element)
        return shape
    }

    drawConnection(parentNode, element) {
        // const type = element.type // 获取到类型
        // if (customElements.includes(type)) { // or customConfig[type]
        //     const { url, attr } = customConfig[type]
        //     const customIcon = svgCreate('image', { // 在这里创建了一个image
        //         ...attr,
        //         href: url
        //     })
        //     // element['width'] = 50 // 这里我是取了巧, 直接修改了元素的宽高
        //     // element['height'] = 30
        //     svgAppend(parentNode, customIcon)
        //     return customIcon
        // }
        const shape = this.bpmnRenderer.drawConnection(parentNode, element)
        return shape
    }

    getShapePath(shape) {
        return this.bpmnRenderer.getShapePath(shape)
    }
}

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer']
